<template>
  <div id="whole">
    <mt-header fixed title="我的宠物" style="background:#f49b00">
        <router-link to="" slot="left">
            <mt-button icon="back" @click="$router.go(-1)"></mt-button>
        </router-link>
        <!-- <mt-button icon="more" slot="right"></mt-button> -->
    </mt-header>

    <div style="height:40px"></div>

    <!-- 宠物列表 -->
    <div class="card" v-for="item in pet" :key="item.apid" v-show="pet" @click="details(item.apid)">
      <img :src="`${item.pic}`">
      <div>
        <h3>{{item.petName}}</h3>
        <p>性别：{{item.sex}}</p>
        <p>类型：{{item.type}}</p>
      </div>
    </div>
    <div v-show="!pet">
      <p style="text-align:center;padding-top:200px;color:#7f7f7f">暂无领养宠物</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pet: [],
    }
  },
  mounted(){
    this.myPet()
  },
  methods: {
    // 点击卡片跳转到详情页方法
    details(id) {
      this.$router.push(`/adopt/details?apid=${id}`);
    },

    // 发送请求，获得我的宠物数据
    myPet() {
      let uid = this.$store.state.uid
      // console.log(uid);
      let params = {"uid":uid}
      this.axios.post('/mypet',params).then(res=>{
        console.log(res);
        this.pet = res.data.data
      })
    }
  },
};
</script>

<style lang="scss" scoped>
// #frame > b {
//   margin: 10px;
//   font-size: 20px;
// }

// #frame img {
//   width: 120px;
//   height: 100px;
//   margin: 10px 20px;
//   border-radius: 3px;
// }

// #frame {
//   display: flex;
// }
#whole {
  background-color: #fbf7f7;
  height: 100vh;
}

.card{
  margin: 10px 10px;
  display: flex;
  box-shadow: 1px 1px 10px 5px rgba(0, 0, 0, 0.02);
  border-radius: 5px;
  background-color: white;
}
.card img{
  width: 40%;
  padding: 5px;
}
.card >div{
  margin-left: 20px;
}

::v-deep .mint-header-title{
  font-size: 15px;
}
</style>